<template>
  <div class="publicity-header">
    <!-- left -->
    <div class="publicity-header-left">
      <!-- logo -->
      <Logo style="width: 160px; margin: 0 16px;" type="LOGO_1"></Logo>

      <!-- 导航 -->
      <Tabs style="height: 30px; margin-left: 86px;"></Tabs>
    </div>

    <!-- right -->
    <div class="publicity-header-right">
      <!-- if 登陆/注册 -->
      <LoginAndRegist v-if="!bIsLogined" style="margin: 0px 16px;"></LoginAndRegist>

      <!-- else 头像 -->
      <UserPortrait v-if="bIsLogined" style="margin: 0px 16px;"></UserPortrait>
    </div>
  </div>
</template>

<script>
  import LoginAndRegist from './parts/LoginAndRegist.vue';
  import Tabs from './parts/Tabs.vue';
  import Logo from './parts/Logo.vue';
  import UserPortrait from './parts/UserPortrait.vue';
  import { mapState, mapActions } from 'vuex';
  export default {
    name: 'PublicityHeader',
    computed: {
      ...mapState({
        user: state => _.cloneDeep(state.user.user),  // 用户信息，用来判断是否登录
      }),
      bIsLogined() {  // 判断是否登录？
        return _.keys(this.user).length > 0;
      },
    },
    components: {
      Logo,
      UserPortrait,
      Tabs,
      LoginAndRegist
    },
    created() {
      this.initUserInfo();
    },
    methods: {
      ...mapActions({
        initUserInfo: 'user/initUserInfo',
      }),
    },
  }
</script>

<style lang="scss">
  .publicity-header {
    position: relative;
    min-width: 1000px;
    height: 60px;
    // box-shadow: 5px 5px 10px #000;

    .publicity-header-left {
      position: relative;
      float: left;
      height: 100%;

      display: flex;
      // justify-content: center;
      align-items: center;
    }

    .publicity-header-right {
      position: relative;
      float: right;
      height: 100%;

      display: flex;
      // justify-content: center;
      align-items: center;
    }
  }
</style>
